import React, { Component } from 'react';
import { WhiteSpace, List, InputItem, Toast } from 'antd-mobile';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import YwxButton from '../../components/common/YwxButton/YwxButton';
// const Item = List.Item;


export default class Authentication extends Component {


    constructor(props) {
        super(props);
        this.state = {
            allPath: '',
            time: 60,
            // isGetCodeLoading: false,
            formData: {
                name: '',
                phone: '',
                account: ''
            }
        }
        this.fetchData();
        this.onSubmit = React.$utils.throttle(this.onSubmit, 2000);
    };

    fetchData = () => {
        React.$utils.request({
            url: '/app/user'
        }).then(res => {
            let {
                name = '',
                phone = '',
            } = res
            this.setState({
                formData: {
                    ...this.state.formData,
                    name,
                    phone
                }
            })
        })
    };


    onAccountChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                account: value
            }
        })
    };

    onCodeChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                code: value
            }
        })
    };

    getCode = () => {
        let phone = this.state.formData.phone;
        phone = phone.replace(/\s/g, '');
        let result = React.$utils.validatePhone(phone);
        if (!result) {
            Toast.fail('请输入正确的手机号')
            return false
        }

        React.$utils.request({
            url: '/api/sendSms',
            params: {
                phone
            }
        }).then(res => {
            this.setState({
                isGetCodeLoading: true
            });
            res.msg && Toast.success(res.msg);
            let timer = setInterval(() => {
                if (this.state.time <= 0) {
                    this.setState({
                        time: 60,
                        isGetCodeLoading: false
                    });
                    clearInterval(timer)
                } else {
                    this.setState({
                        time: this.state.time - 1
                    })
                }
            }, 1000)
        })
    };

    validate = (callback) => {
        let {
            account
        } = this.state.formData;
        let msg = '';

        if (!account) {
            msg = '请输入云闪付账号';
        }

        if (msg) {
            Toast.fail(msg)
        } else {
            callback && callback();
        }
    };

    onSubmit = () => {
        this.validate(() => {
            let {
                account
            } = this.state.formData;

            React.$utils.request({
                url: '/app/authentication',
                method: 'put',
                data: {
                    account
                }
            }).then(res => {
                Toast.success('提交成功', 2, () => {
                    this.props.history.go(-1);
                });
            })
        });
    };

    render() {

        const {
            name,
            phone,
            account
        } = this.state.formData


        return (
            <div className='authentication'>
                <YwxNavBar>实名认证</YwxNavBar>
                <WhiteSpace />
                <List>
                    <InputItem value={name} editable={false}>姓名</InputItem>
                    <InputItem value={phone} type='phone' editable={false}>手机号码</InputItem>
                    <InputItem value={account} onChange={this.onAccountChange}>云闪付账号</InputItem>
                </List>
                <YwxButton style={{ marginTop: '1rem' }} onClick={this.onSubmit}>确认认证</YwxButton>
            </div>
        );
    }
}